 <template>
  <div>
    <van-uploader :after-read="uploadFile" />

    <div class="upload-img-box">
      <div class="upload-container">
        <div class="upload-item-box">
          <img :src="img" class="img" />
          <!-- option是配置，格式是对象，getbase64Data是组件的一个方法获取裁剪完的头像 2.14新增一个获取getblobData的方法 -->
          <h5-cropper
            :option="option"
            @getbase64Data="getbase64Data"
            @getFile="getFile"
          ></h5-cropper>
        </div>
        <div class="upload-item-box"></div>
        <div class="upload-item-box"></div>
        <div class="upload-item-box"></div>
        <div class="upload-item-box"></div>
        <div class="upload-item-box"></div>
        <div class="upload-item-box"></div>
        <div class="upload-item-box"></div>
        <div class="upload-item-box"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { apiUpload } from "../../request/api";
import H5Cropper from "vue-cropper-h5";
export default {
  data() {
    return {
      fileList: [], // 已上传图片列表
      option: {}, //配置
      img: "",
    };
  },
  methods: {
    uploadFile(file) {
      // 新建formData对象
      const formData = new FormData();
      // 添加要上传的文件
      formData.append("file", file);
      apiUpload(formData).then((res) => {
        if (res.code == 200) {
          console.log(res);
        }
      });
      console.log(file);
    },
    getbase64Data(data) {
      this.img = data;
    },
    getFile(data) {
      console.log(data);
      this.uploadFile(data)
    },
  },
  components: { H5Cropper },
};
</script>

<style lang="scss" scope>
.upload-img-box {
  margin: 40px 0;
}
.upload-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.upload-item-box {
  border: 1px solid #707070;
  width: calc(33.3% - 22px);
  height: 204px;
  margin-bottom: 22px;
}
</style> -->





